<template>
	<view>
		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					打卡日期
				</view>
				<view class="uni-list-cell-db">
					<picker mode="date" :value="checkDate" :start="checkStartDate" :end="checkEndDate" @change="bindCheckDateChange">
						<view class="uni-input">{{checkDate}}</view>
					</picker>
				</view>
			</view>
		</view>
		<uni-card isShadow v-for="(item,index) in userCheckDetailLists">
			<view class="uni-card-left-cont">
				<view>工种：{{item.workerType}}</view>
				<view>数量：{{item.numberOfPeople}}</view>
				<view>单价：{{item.price.toFixed(2)}}</view>
				<view>总价：{{(item.numberOfPeople * item.price).toFixed(2)}}</view>
			</view>
			<view class="uni-card-right-cont">
				<button type="default" size="mini" @click="handleUpdate(item)">编辑</button>
				<button type="default" size="mini" @click="handleDelete(item)">删除</button>
			</view>
		</uni-card>
		
		<view class="uni-section" nvue>
			<view class="uni-section__head">
				<view class="line uni-section__head-tag" />
			</view>
			<view class="uni-section__content">
				<text class="distraction uni-section__content-title">{{formData.id === 0 ? '增加' : '修改'}}</text>
			</view>
			<slot />
		</view>
		
			<view class="uni-list">
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">工种</view>
					<view class="uni-list-cell-db">
						<picker @change="formWorkerTypeChange" :value="formData.workerTypeIndex" :range="workerTypeLists" range-key="name">
							<view v-if="formData.workerTypeIndex >= 0" class="uni-input">{{workerTypeLists[formData.workerTypeIndex].name}}</view>
							<view v-else class="uni-input input-placeholder-text">请选择工种</view>
						</picker>
					</view>
				</view>
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">人数</view>
					<view class="uni-list-cell-db">
						<input v-model="formData.numberOfPeople" class="uni-input" type="number" placeholder="请输入人数" />
					</view>
				</view>
				
				<view class="uni-list-cell">
					<view class="uni-list-cell-left">单价</view>
					<view class="uni-list-cell-db">
						<input v-model="formData.price" class="uni-input" type="digit" placeholder="请输入单价" />
					</view>
				</view>
			</view>
			
			<view class="button-sp-area">
				<button @click="formSubmit" class="mini-btn" size="mini" type="primary" form-type="submit">{{formData.id === 0 ? "增加" : "修改"}} </button>
				<button @click="formReset" class="mini-btn" style="margin-left: 10%;" size="mini" type="default">取消</button>
			</view>
	</view>
</template>

<script>
	import { queryAllWorkerTypeInfo } from '@/api/workerTypeInfo.js';
	import { addUserCheckDetail, updUserCheckDetail, delUserCheckDetail, queryCheckDetail } from '@/api/userCheckDetail.js'
	
	function getDate(type) {
		const date = new Date();
	
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	
		if (type === 'start') {
			year = year - 2;
		} else if (type === 'end') {
			//year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	
		return `${year}-${month}-${day}`;
	}
	export default {
		onLoad(options){
			if(!options || !options.belongsDate) {
				uni.navigateBack({delta:1});
				return;
			}
			this.checkDate = decodeURIComponent(options.belongsDate);
			this.getWorkerTypeLists();
			this.getCheckDetailLists();
		},
		onPullDownRefresh() {
			this.getWorkerTypeLists();
			this.getCheckDetailLists();
		},
		data(){
			return {
				checkDate: undefined,
				workerTypeLists:[],
				userCheckDetailLists: [],
				checkStartDate:getDate('start'),
				checkEndDate:getDate('end'),
				formData:{
					id: 0,
					belongsDate: '',
					workerTypeId: undefined,
					workerTypeIndex: undefined,
					numberOfPeople: 0,
					price: 0
				},
				successCode: 20000
			}
		},
		methods: {
			// 获取工种类型
			getWorkerTypeLists: function() {
				queryAllWorkerTypeInfo().then(resp => {
					this.workerTypeLists = resp.datas.datas;
					uni.stopPullDownRefresh();
				}).catch(error => {
					uni.stopPullDownRefresh();
					uni.showToast({
						title: error,
						duration: 2000,
						icon: "none"
					});
				});
			},
			bindCheckDateChange: function(e) {
				this.checkDate = e.detail.value;
				this.getCheckDetailLists();
			},
			getCheckDetailLists: function() {
				queryCheckDetail(this.checkDate).then(resp => {
					this.userCheckDetailLists = resp.datas;
					uni.stopPullDownRefresh();
				});
			},
			formWorkerTypeChange: function(e) {
				this.formData.workerTypeIndex = e.detail.value;
				this.formData.workerTypeId = this.workerTypeLists[this.formData.workerTypeIndex].id;
				this.formData.price = this.workerTypeLists[this.formData.workerTypeIndex].price;
			},
			formSubmit: function(){
				console.log("表单提交触发");
				console.log(this.formData);
				// 校验表单数据
				this.formData.belongsDate = this.checkDate;
				if(this.formData.workerTypeId === undefined || this.formData.workerTypeId < 0) {
					uni.showToast({ title: "请选择工种类型", icon: "none" });
					return;
				}
				if(this.formData.numberOfPeople === undefined || this.formData.numberOfPeople <= 0) {
					uni.showToast({ title: "请选择填写人数", icon: "none" });
					return;
				}
				else if (this.formData.numberOfPeople > 999999) {
					uni.showToast({ title: "人数范围在1到999999", icon: "none" });
					return;
				}
				if(this.formData.price === undefined || this.formData.price <= 0) {
					uni.showToast({ title: "请选择填写价格", icon: "none" });
					return;
				}
				else if(this.formData.price > 999999) {
					uni.showToast({ title: "价格范围在1到999999", icon: "none" });
					return;
				}
				// 接口提交
				if(this.formData.id <= 0) {
					addUserCheckDetail(this.formData).then(resp => {
						uni.showToast({
							title: "操作成功",
							duration: 2000,
							icon: "none"
						});
						this.getCheckDetailLists();
						this.formReset();
					}).catch(error => {
						uni.showToast({
							title: error,
							duration: 2000,
							icon: "none"
						});
					});
				}
				else {
					updUserCheckDetail(this.formData).then(resp => {
						uni.showToast({
							title: "操作成功",
							duration: 2000,
							icon: "none"
						});
						this.getCheckDetailLists();
						this.formReset();
					}).catch(error => {
						uni.showToast({
							title: error,
							duration: 2000,
							icon: "none"
						});
					});
				}
			},
			formReset: function(){
				this.formData.id = 0;
				this.formData.workerTypeIndex = undefined;
				this.formData.workerTypeId = undefined;
				this.formData.numberOfPeople = 0;
				this.formData.price = 0;
				console.log("formReset 方法触发");
				console.log(this.formData);
			},
			handleUpdate: function(data){
				this.formData.id= data.id;
				this.formData.workerTypeId = data.workerTypeId;
				this.formData.numberOfPeople = data.numberOfPeople;
				this.formData.price = data.price;
				this.formData.workerTypeIndex = this.workerTypeLists.findIndex(x=>x.id === data.workerTypeId);
			},
			handleDelete: function(data){
				var thisOpeta = this;
				uni.showModal({
					content: "确定要删除",
					confirmText: "确定",
					cancelText: "取消",
					success: res => {
						if (!res.confirm) {
							return;
						} 
						// 执行删除操作
						delUserCheckDetail(data.id).then(resp=> {
							thisOpeta.getCheckDetailLists();
							uni.showToast({
								title: "删除成功",
								duration: 2000,
								icon: "none"
							});
						}).catch(error => {
							uni.showToast({
								title: error,
								duration: 2000,
								icon: "none"
							});
						});
					}
				})		
			}
		}
	}
</script>


<style scoped>
	.uni-section {
		position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		margin-top: 10px;
		flex-direction: row;
		align-items: center;
		padding: 0 10px;
		height: 50px;
		background-color: #f8f8f8;
		/* #ifdef APP-NVUE */
		/* #endif */
		font-weight: normal;
	}

	/* #ifndef APP-NVUE */
	/* #endif */
	.uni-section__head {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-right: 10px;
	}

	.line {
		height: 15px;
		background-color: #c0c0c0;
		border-radius: 5px;
		width: 3px;
	}

	.circle {
		width: 8px;
		height: 8px;
		border-top-right-radius: 50px;
		border-top-left-radius: 50px;
		border-bottom-left-radius: 50px;
		border-bottom-right-radius: 50px;
		background-color: #c0c0c0;
	}

	.uni-section__content {
		flex-direction: column;
		flex: 1;
		color: #333;
	}

	.uni-section__content-title {
		font-size: 14px;
		color: #333;
	}

	.distraction {
		flex-direction: row;
		align-items: center;
	}

	.uni-section__content-sub {
		font-size: 12px;
		color: #999;
	}
    .button-sp-area {
        margin: 20rpx auto;
        width: 80%;
    }
    .mini-btn {
		width: 45%;
		height: 65rpx;
    }
	.input-placeholder-text{
		color: #777;
	}
	.uni-card-left-cont {
		display: inline-block;
		width: 70%;
	}
	.uni-card-right-cont {
		display: inline-block;
		width: 30%;
	}
</style>
